<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>动态路由 | Vue Router</title>
    <meta name="description" content="Vue.js 的官方路由">
    <link rel="stylesheet" href="static/css/style.720cf281.css">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/Home.50302e7a.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.4cf347f1.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/ui-custom.8de93204.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/AlgoliaSearchBox.80d79d6b.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/app.47b74ea6.js">
    <link rel="modulepreload" href="https://router.vuejs.org/assets/zh_guide_advanced_dynamic-routing.md.10e27a0f.lean.js">
    
    <link rel="icon" href="static/picture/logo.png">
  <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
  <script src="static/js/thesemetrics@latest.js" async=""></script>
  <meta name="twitter:title" content="动态路由 | Vue Router">
  <meta property="og:title" content="动态路由 | Vue Router">
  </head>
  <body>
    <div id="app"><div class="main-container" data-v-46b24580=""><!----><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756=""><div class="sidebar-button" data-v-675d8756=""><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path></svg></div><a class="nav-bar-title" href="index1.html" aria-label="Vue Router, back to home" data-v-675d8756="" data-v-4a583abe=""><!----> Vue Router</a><div class="flex-grow" data-v-675d8756=""></div><div class="nav" data-v-675d8756=""><nav class="nav-links" data-v-675d8756="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="index2.html" data-v-b8818f8c="">教程 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="index3.html" data-v-b8818f8c="">API 参考 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="index4.html" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">选择语言</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="dynamic-routing1.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68=""><nav class="nav-links nav" data-v-83e92a68="" data-v-eab3edfe=""><!--[--><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item active" href="index2.html" data-v-b8818f8c="">教程 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item" href="index3.html" data-v-b8818f8c="">API 参考 <!----></a></div></div><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">v4.x</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item isExternal" href="index4.html" target="_blank" rel="noopener noreferrer" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">v3.x</span><span class="icon" data-v-bbc27490=""><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-bbc27490=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><div class="item" data-v-eab3edfe=""><div class="nav-dropdown-link" data-v-eab3edfe="" data-v-56bf3a3f=""><button class="button" data-v-56bf3a3f=""><span class="button-text" data-v-56bf3a3f="">选择语言</span><span class="right button-arrow" data-v-56bf3a3f=""></span></button><ul class="dialog" data-v-56bf3a3f=""><!--[--><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item" href="dynamic-routing1.html" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">English</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><li class="dialog-item" data-v-56bf3a3f=""><div class="nav-dropdown-link-item" data-v-56bf3a3f="" data-v-bbc27490=""><a class="item active" href="" data-v-bbc27490=""><span class="arrow" data-v-bbc27490=""></span><span class="text" data-v-bbc27490="">中文</span><span class="icon" data-v-bbc27490=""><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-eab3edfe=""><div class="nav-link" data-v-eab3edfe="" data-v-b8818f8c=""><a class="item isExternal" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-b8818f8c="">GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--[--><div class="sponsors sponsors-top" data-v-46b24580=""><span data-v-46b24580="">Platinum Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--><ul class="sidebar-links" data-v-83e92a68=""><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="introduction.html">介绍</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="installation.html">安装</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">基础</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="index2.html">入门</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="dynamic-matching.html">动态路由匹配</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="route-matching-syntax.html">路由的匹配语法</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="nested-routes.html">嵌套路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="navigation.html">编程式导航</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="named-routes.html">命名路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="named-views.html">命名视图</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="redirect-and-alias.html">重定向和别名</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="passing-props.html">路由组件传参</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="history-mode.html">不同的历史记录模式</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">进阶</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="navigation-guards.html">导航守卫</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="meta.html">路由元信息</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="data-fetching.html">数据获取</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="composition-api.html">组合式 API</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="transitions.html">过渡动效</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="scroll-behavior.html">滚动行为</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="lazy-loading.html">路由懒加载</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="extending-router-link.html">扩展 RouterLink</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="navigation-failures.html">导航故障</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="">动态路由</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#添加路由">添加路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#在导航守卫中添加路由">在导航守卫中添加路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#删除路由">删除路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#添加嵌套路由">添加嵌套路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#查看现有路由">查看现有路由</a><!----></li></ul></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="index.html">从 Vue2 迁移</a><!----></li><!--]--></ul><!--[--><!--[--><div class="sponsors" data-v-46b24580=""><span data-v-46b24580="">Sponsors</span><!--[--><a href="javascript:;" target="_blank" rel="noopener" data-v-46b24580=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-46b24580=""></a><!--]--></div><!--]--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4=""><div class="container" data-v-7eddb2c4=""><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" ref_key="el" data-v-5941b830=""></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4=""><div><h1 id="动态路由" tabindex="-1">动态路由 <a class="header-anchor" href="#动态路由" aria-hidden="true">#</a></h1><p>对路由的添加通常是通过 <a href="index3.html#routes"><code>routes</code> 选项</a>来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由。具有可扩展接口(如 <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue CLI UI</a> )这样的应用程序可以使用它来扩展应用程序。</p><h2 id="添加路由" tabindex="-1">添加路由 <a class="header-anchor" href="#添加路由" aria-hidden="true">#</a></h2><p>动态路由主要通过两个函数实现。<code>router.addRoute()</code> 和 <code>router.removeRoute()</code>。它们<strong>只</strong>注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 <code>router.push()</code> 或 <code>router.replace()</code> 来<strong>手动导航</strong>，才能显示该新路由。我们来看一个例子：</p><p>想象一下，只有一个路由的以下路由：</p><div class="language-js"><pre><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">history</span><span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/:articleName&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Article <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>进入任何页面，<code>/about</code>，<code>/store</code>，或者 <code>/3-tricks-to-improve-your-routing-code</code> 最终都会呈现 <code>Article</code> 组件。如果我们在 <code>/about</code> 上添加一个新的路由：</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>页面仍然会显示 <code>Article</code> 组件，我们需要手动调用 <code>router.replace()</code> 来改变当前的位置，并覆盖我们原来的位置（而不是添加一个新的路由，最后在我们的历史中两次出现在同一个位置）：</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）</span>
router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>router<span class="token punctuation">.</span>currentRoute<span class="token punctuation">.</span>value<span class="token punctuation">.</span>fullPath<span class="token punctuation">)</span>
</code></pre></div><p>记住，如果你需要等待新的路由显示，可以使用 <code>await router.replace()</code>。</p><h2 id="在导航守卫中添加路由" tabindex="-1">在导航守卫中添加路由 <a class="header-anchor" href="#在导航守卫中添加路由" aria-hidden="true">#</a></h2><p>如果你决定在导航守卫内部添加或删除路由，你不应该调用 <code>router.replace()</code>，而是通过返回新的位置来触发重定向：</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token parameter">to</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">hasNecessaryRoute</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token function">generateRoute</span><span class="token punctuation">(</span>to<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token comment">// 触发重定向</span>
    <span class="token keyword">return</span> to<span class="token punctuation">.</span>fullPath
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>上面的例子有两个假设：第一，新添加的路由记录将与 <code>to</code> 位置相匹配，实际上导致与我们试图访问的位置不同。第二，<code>hasNecessaryRoute()</code> 在添加新的路由后返回 <code>false</code>，以避免无限重定向。</p><p>因为是在重定向中，所以我们是在替换将要跳转的导航，实际上行为就像之前的例子一样。而在实际场景中，添加路由的行为更有可能发生在导航守卫之外，例如，当一个视图组件挂载时，它会注册新的路由。</p><h2 id="删除路由" tabindex="-1">删除路由 <a class="header-anchor" href="#删除路由" aria-hidden="true">#</a></h2><p>有几个不同的方法来删除现有的路由：</p><ul><li>通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：<div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的</span>
router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/other&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Other <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></li><li>通过调用 <code>router.addRoute()</code> 返回的回调：<div class="language-js"><pre><code><span class="token keyword">const</span> removeRoute <span class="token operator">=</span> router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span>routeRecord<span class="token punctuation">)</span>
<span class="token function">removeRoute</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 删除路由如果存在的话</span>
</code></pre></div>当路由没有名称时，这很有用。</li><li>通过使用 <code>router.removeRoute()</code> 按名称删除路由：<div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;about&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> About <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 删除路由</span>
router<span class="token punctuation">.</span><span class="token function">removeRoute</span><span class="token punctuation">(</span><span class="token string">&#39;about&#39;</span><span class="token punctuation">)</span>
</code></pre></div>需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 <code>Symbol</code> 作为名字。</li></ul><p>当路由被删除时，<strong>所有的别名和子路由也会被同时删除</strong></p><h2 id="添加嵌套路由" tabindex="-1">添加嵌套路由 <a class="header-anchor" href="#添加嵌套路由" aria-hidden="true">#</a></h2><p>要将嵌套路由添加到现有的路由中，可以将路由的 <em>name</em> 作为第一个参数传递给 <code>router.addRoute()</code>，这将有效地添加路由，就像通过 <code>children</code> 添加的一样：</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/admin&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Admin <span class="token punctuation">}</span><span class="token punctuation">)</span>
router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;settings&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> AdminSettings <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>这等效于：</p><div class="language-js"><pre><code>router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/admin&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">component</span><span class="token operator">:</span> Admin<span class="token punctuation">,</span>
  <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;settings&#39;</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> AdminSettings <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="查看现有路由" tabindex="-1">查看现有路由 <a class="header-anchor" href="#查看现有路由" aria-hidden="true">#</a></h2><p>Vue Router 提供了两个功能来查看现有的路由：</p><ul><li><a href="index3.html#hasroute"><code>router.hasRoute()</code></a>：检查路由是否存在。</li><li><a href="index3.html#getroutes"><code>router.getRoutes()</code></a>：获取一个包含所有路由记录的数组。</li></ul></div></div><footer class="page-footer" data-v-7eddb2c4="" data-v-fb8d84c6=""><div class="edit" data-v-fb8d84c6=""><div class="edit-link" data-v-fb8d84c6="" data-v-1ed99556=""><a class="link" href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-1ed99556="">Suggest changes to this page <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556=""><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-fb8d84c6=""><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4="" data-v-38ede35f=""><div class="container" data-v-38ede35f=""><div class="prev" data-v-38ede35f=""><a class="link" href="javascript:;" data-v-38ede35f=""><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f=""><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f="">导航故障</span></a></div><div class="next" data-v-38ede35f=""><a class="link" href="index.html" data-v-38ede35f=""><span class="text" data-v-38ede35f="">从 Vue2 迁移</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f=""><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17=""><div class="bsa-cpc" data-v-4ce5ad17=""></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"api_index.md\":\"d2104c47\",\"guide_advanced_composition-api.md\":\"c4a35a0b\",\"guide_advanced_data-fetching.md\":\"b840e67c\",\"guide_advanced_dynamic-routing.md\":\"652f0e44\",\"guide_advanced_extending-router-link.md\":\"9af8914a\",\"guide_advanced_lazy-loading.md\":\"8d710c99\",\"guide_advanced_meta.md\":\"a024ec3d\",\"guide_advanced_navigation-failures.md\":\"57e1a0e2\",\"guide_advanced_navigation-guards.md\":\"7d263b2b\",\"guide_advanced_scroll-behavior.md\":\"84f7daa3\",\"guide_advanced_transitions.md\":\"85553476\",\"guide_essentials_dynamic-matching.md\":\"fa6babaa\",\"guide_essentials_history-mode.md\":\"56f164ed\",\"guide_essentials_named-routes.md\":\"94d29abc\",\"guide_essentials_named-views.md\":\"c0d13d46\",\"guide_essentials_navigation.md\":\"c1db3764\",\"guide_essentials_nested-routes.md\":\"0c92c29e\",\"guide_essentials_passing-props.md\":\"c283ba51\",\"guide_essentials_redirect-and-alias.md\":\"ff823362\",\"guide_essentials_route-matching-syntax.md\":\"8d709abb\",\"guide_index.md\":\"adc6171f\",\"guide_migration_index.md\":\"b3d45cf2\",\"index.md\":\"58761df1\",\"installation.md\":\"80dcd302\",\"introduction.md\":\"e6a9eb47\",\"zh_api_index.md\":\"9540fde2\",\"zh_guide_advanced_composition-api.md\":\"c9cfee63\",\"zh_guide_advanced_data-fetching.md\":\"c83aef48\",\"zh_guide_advanced_dynamic-routing.md\":\"10e27a0f\",\"zh_guide_advanced_extending-router-link.md\":\"4de5dd4e\",\"zh_guide_advanced_lazy-loading.md\":\"bc3ba5ac\",\"zh_guide_advanced_meta.md\":\"9802cc2e\",\"zh_guide_advanced_navigation-failures.md\":\"02c8440d\",\"zh_guide_advanced_navigation-guards.md\":\"2c59c5ad\",\"zh_guide_advanced_scroll-behavior.md\":\"22a11e87\",\"zh_guide_advanced_transitions.md\":\"f4039441\",\"zh_guide_essentials_dynamic-matching.md\":\"e6594e44\",\"zh_guide_essentials_history-mode.md\":\"beb89b31\",\"zh_guide_essentials_named-routes.md\":\"66c05082\",\"zh_guide_essentials_named-views.md\":\"9aae5c1b\",\"zh_guide_essentials_navigation.md\":\"c0faee1f\",\"zh_guide_essentials_nested-routes.md\":\"e1852582\",\"zh_guide_essentials_passing-props.md\":\"030d2081\",\"zh_guide_essentials_redirect-and-alias.md\":\"ea0856be\",\"zh_guide_essentials_route-matching-syntax.md\":\"e907166f\",\"zh_guide_index.md\":\"bb134cde\",\"zh_guide_migration_index.md\":\"c448fcd8\",\"zh_index.md\":\"90ac17e3\",\"zh_installation.md\":\"7a5d9568\",\"zh_introduction.md\":\"6a2f4e36\"}")</script>
    <script type="module" async="" src="static/js/app.47b74ea6.js"></script>
    
  </body>
</html>